


Vue.component("date-picker", {         //可小驼峰可烤串

    props: {
        // // 自定义验证函数
        // dateSelect: {              //此处必须(小)驼峰
        //     type: String,
        //     validator: function (value) {
        //         var reg = /^[1-2]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[0-1])$/g;
        //         return reg.test(value);
        //     }
        // },

        dateShow: {
            type: Date,
            // 对象或数组默认值必须从一个工厂函数获取
            default: function () {
                return new Date();
            },
        },
        isEnablePost: {
            type: Boolean,
            default: false,
        },
        isPrevEnable: {
            type: Boolean,
            default: true,
        },
        isNextEnale: {
            type: Boolean,
            default: true,
        },
        isTodayEnale: {
            type: Boolean,
            default: true,
        }
    },

    template: `
    <div class="datepicker" >
        <div class="datepicker-header">
            <button @click.stop="prev" class="datepicker-prevbtn" v-bind:class="{ disvisib: !isPrevEnable }"> 上月
            </button>
            <label>{{ month }}</label>
            <button @click.stop="next" class="datepicker-nextbtn" v-bind:class="{ disvisib: !isNextEnale }">下月</button>
        </div>
        
        <div class="datepicker-body">
            <table cellspacing="0">
                <tbody>
                    <tr>
                        <th style="color:red">日</th>
                        <th>一</th>
                        <th>二</th>
                        <th>三</th>
                        <th>四</th>
                        <th>五</th>
                        <th style="color:red">六</th>
                    </tr>

                    <tr v-for="row in [0,1,2,3,4,5]" class="datepicker-dayrow">
                        <td v-for="column in [0,1,2,3,4,5,6]" v-bind:class="[  cells[row * 7 + column].type, getCellPostClass(cells[row * 7 + column])]"
                            v-on:click.stop="clickDay(cells[row * 7 + column])">
                            {{ cells[row * 7 + column].text }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="datepicker-footer">
            <button class="datepicker-todaybtn" @click.stop="changeToToday"  v-bind:class="{ disvisib: !isTodayEnale }">回到今天</button>
        </div>
    </div>
    `,


    computed: {
        cells() {
            return this.mkcells(this.dateShow);
        },
        month() {
            var month = this.dateShow.getMonth() + 1;
            return this.dateShow.getFullYear() + "-" + (month < 10 ? '0' + month : month);
        },
    },

    methods: {
        clickDay(cell) {
            if ('normal' === cell.type) {
                if (this.isEnablePost || !this.isCellPost(cell)) {
                    var datePick = new Date(this.dateShow);
                    datePick.setDate(cell.text);

                    this.$emit('picker-event', this.getFormatDate(datePick));
                }
            }
        },

        getCellPostClass(cell) {
            if (this.isEnablePost) {
                return '';
            }

            if ('normal' === cell.type && this.isCellPost(cell)) {
                return 'post-date';
            }

            return '';
        },

        isCellPost(cell) {
            if (this.dateShow.getTime() > new Date().getTime()) {
                return false;
            }

            if (this.dateShow.getFullYear() < new Date().getFullYear()
                || this.dateShow.getMonth() < new Date().getMonth()) {
                return true;
            }

            return (cell.text < new Date().getDate());
        },

        changeToToday() {
            this.$emit('today-event');
        },
        prev() {
            this.$emit('prev-event');
        },

        next() {
            this.$emit('next-event');
        },

        getFormatDate(date) {
            var seperator1 = "-";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();

            month = (month > 0 && month <= 9) ? ('0' + month) : month;
            strDate = (strDate > 0 && strDate <= 9) ? ('0' + strDate) : strDate;

            return year + seperator1 + month + seperator1 + strDate;
        },

        getDayCountOfMonth(year, month) {
            if (month === 3 || month === 5 || month === 8 || month === 10) {
                return 30;
            }

            if (month === 1) {
                if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
                    return 29;
                } else {
                    return 28;
                }
            }

            return 31;
        },

        getFirstDayOfMonth(date) {
            var temp = new Date(date.getTime());
            temp.setDate(1);
            return temp.getDay();
        },

        prevMonth(dateIn) {
            var date = new Date(dateIn);
            var year = date.getFullYear();
            var month = date.getMonth();

            var newYear = month === 0 ? year - 1 : year;
            var newMonth = month === 0 ? 11 : month - 1;

            date.setMonth(newMonth);
            date.setFullYear(newYear);
            return date;
        },

        nextMonth(dateIn) {
            var date = new Date(dateIn);
            var year = date.getFullYear();
            var month = date.getMonth();

            var newYear = month === 11 ? year + 1 : year;
            var newMonth = month === 11 ? 0 : month + 1;

            date.setMonth(newMonth);
            date.setFullYear(newYear);
            return date;
        },

        mkcells(date) {
            var day = this.getFirstDayOfMonth(date);
            var maxDay = this.getDayCountOfMonth(date.getFullYear(), date.getMonth());
            var lastMonthDay = this.getDayCountOfMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1));

            day = (day === 0 ? 7 : day);

            var cells = [];
            var count = 1;
            // var firstDayPosition;

            for (var i = 0; i < 6; i++) {
                for (var j = 0; j < 7; j++) {
                    var cell = { row: i, column: j, type: 'normal' };
                    if (i === 0) {
                        if (j >= day) {
                            cell.text = count++;
                            // if (count === 2) {
                            //     firstDayPosition = i * 7 + j;
                            // }
                        } else {
                            cell.text = lastMonthDay - (day - j % 7) + 1;
                            cell.type = 'prevmonth';
                        }
                    } else {
                        if (count <= maxDay) {
                            cell.text = count++;
                            // if (count === 2) {
                            //     firstDayPosition = i * 7 + j;
                            // }
                        } else {
                            cell.text = count++ - maxDay;
                            cell.type = 'nextmonth';
                        }
                    }
                    cells.push(cell);
                }
            }

            // cells.firstDayPosition = firstDayPosition;

            return cells;
        },
    }

})


// Vue.component('custom-list', {
//     props: ["aaa"],                        //传自定义属性名
//     template: `<ul>
//                <li v-for="item of aaa" @click="selectValueHandle(item)">{{item}}</li>
//             </ul>`,
//     methods: {
//         selectValueHandle(item) {
//             this.$emit('receive', item)   //$emit告诉父级发生的（自定义）事件，v-on在父组件绑定（自定义）事件
//         }
//     },
//     style: {
//         li: {
//             color: 'red',
//         }
//     }
// })
